<template>
    <div class="screentop">
        <div class="topleft">
            <div class="btnleft">
                <span @click="goHome">首页</span>
            </div>
        </div>
        <div class="topcenter">
            <div class="btncenter"><span>智慧旅行可视化大数据展示平台</span></div>
        </div>
        <div class="topright">
            <span class="btnright"> 历史</span>
            <span class="time">{{ time }}</span>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import moment from 'moment'
let $router = useRouter()
let time = ref(moment().format('YYYY年MM月DD日:hh-mm-ss'))
let timer = ref(0)
const goHome = () => {
    $router.push('/home')
}
onMounted(() => {
    timer.value = setInterval(() => {
        time.value = moment().format('YYYY年MM月DD日:hh-mm-ss')
    }, 1000)
})
onBeforeUnmount(() => {
    console.log(111);
    clearInterval(timer.value)
})
</script>
<style scoped lang="scss"> .screentop {
     height: 40px;
     width: 100%;
     display: flex;

     .topleft {
         flex: 1;
         background-image: url('@/assets/image/screen/dataScreen-header-left-bg.png');

         .btnleft {
            cursor: pointer;
             width: 100px;
             height: 40px;
             background-image: url('@/assets/image/screen/headerbtnleftbg.png');
             background-size: 100% 100%;
             float: right;
             text-align: center;
             line-height: 40px;
             color: aqua;
         }
     }

     .topcenter {
         flex: 2;
         height: 80px;
         background-image: url('@/assets/image/screen/headercenter.png');
         background-size: 100% 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: aqua;

         .btncenter {
             background-image: url('@/assets/image/screen/headercenter.png');
             font-size: 20px;
         }
     }

     .topright {
         flex: 1;
         display: flex;
         justify-content: space-between;
         align-items: center;
         background-image: url('@/assets/image/screen/dataScreen-header-right-bg.png');

         .btnright {
             width: 100px;
             height: 40px;
             background-image: url('@/assets/image/screen/headerbtnrightbg.png');
             background-size: 100% 100%;
             // float: left;
             text-align: center;
             line-height: 40px;
             color: aqua;
         }

         .time {
             color: aqua;
         }
     }
 }</style>